<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<style>
 #obj{
   width:100px;
   height:100px;
   background-color:yellowgreen;
   position:absolute
 }
 #s{
   background-color:rebeccapurple;
   position: relative;
   width:50px;
   height:100px;
 }
</style>
<script>
  window.onload=function(){
    var dir=event.keyCode;
       console.log(dir);
       var speed=10;
       setInterval(function(){
        switch(dir){
        case 37:
        obj.style.left=obj.offsetLeft-speed+'px';
        break;
        case 39:
        obj.style.left=obj.offsetLeft+speed+'px';
        break;
        case 38:
        obj.style.top=obj.offsetTop-speed+'px';
        break;
        case 40:
        obj.style.top=obj.offsetTop+speed+'px';
        break;
      }
       },30);  
     document.onkeydown=function(event){
    if(event.ctrlKey){
      speed=50;
    }
    dir=event.keyCode;
 };
 document.onkeyup=function(event){
   dir=0;
 }
  }
 </script>
<body>
  <div id="obj"></div>
</body>
</html>                                                                                                                                 